<template>
  <!--  <div><h1>用户管理</h1></div>-->

  <!--查看对话框-->
  <div>
    <a-modal v-model:visible="visible" @ok="handleOk" width="60%">
      <div v-if="userData" :key="userData.id">
        <a-descriptions title="用户信息">
          <a-descriptions-item label="id"
            >{{ userData.id }}
          </a-descriptions-item>
          <a-descriptions-item label="登录名"
            >{{ userData.userAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="用户名"
            >{{ userData.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="角色名称"
            >{{ userData.userRole }}
          </a-descriptions-item>
          <a-descriptions-item label="公司"
            >{{ userData.company }}
          </a-descriptions-item>
          <a-descriptions-item label="部门"
            >{{ userData.dept }}
          </a-descriptions-item>
          <a-descriptions-item label="岗位"
            >{{ userData.job }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>

  <!--查询参数-->
  <a-form
    :model="userQueryRequest"
    name="basic"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-row :gutter="24">
      <a-col :span="6">
        <a-form-item label="id" name="id">
          <a-input v-model:value="userQueryRequest.id" placeholder="请输入id" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="登录名" name="userAccount">
          <a-input
            v-model:value="userQueryRequest.userAccount"
            placeholder="请输入登录名"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="用户名" name="userName">
          <a-input
            v-model:value="userQueryRequest.userName"
            placeholder="请输入用户名"
          />
        </a-form-item>
      </a-col>

      <!--      <a-col :span="6">-->
      <!--        <a-form-item label="角色" name="userRole">-->
      <!--          <a-select-->
      <!--            ref="select"-->
      <!--            placeholder="请选择角色"-->
      <!--            v-model:value="value1"-->
      <!--            style="width: 120px"-->
      <!--            @focus="focus"-->
      <!--            @change="handleChange"-->
      <!--          >-->
      <!--            <a-select-option value="admin">admin</a-select-option>-->
      <!--            <a-select-option value="user">user</a-select-option>-->
      <!--            <a-select-option value="">无要求</a-select-option>-->
      <!--          </a-select>-->
      <!--        </a-form-item>-->
      <!--      </a-col>-->

      <a-col :span="6">
        <a-form-item label="公司" name="company">
          <a-input
            v-model:value="userQueryRequest.company"
            placeholder="请输入公司"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="部门" name="dept">
          <a-input
            v-model:value="userQueryRequest.dept"
            placeholder="请输入部门"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="岗位" name="job">
          <a-input
            v-model:value="userQueryRequest.job"
            placeholder="请输入岗位"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-form-item>
      <a-button type="default" html-type="submit" style="margin-right: 50px"
        >筛选
      </a-button>
      <a-button
        type="default"
        html-type="reset"
        style="margin-right: 50px"
        @click="resetUser"
      >
        重置
      </a-button>

      <a-button type="primary" html-type="reset" @click="writeExcel">
        导出
      </a-button>
    </a-form-item>
  </a-form>

  <!--新增用户-->
  <a-button type="primary" block @click="showModal2">新增</a-button>

  <!--在线用户列表-->
  <a-table :columns="columns" :data-source="userList">
    <template #status="{ text: status }">
      <span>
        <a-tag :color="status === 0 ? 'green' : 'red'">
          {{ status === 0 ? "可用" : "不可用" }}
        </a-tag>
      </span>
    </template>

    <template #action="{ text }">
      <a-space wrap>
        <a-button type="primary" block @click="showModal(text.id)"
          >查看
        </a-button>
        <a-button type="dashed" block @click="showModal(text.id)"
          >修改
        </a-button>
        <a-button danger block @click="deleteUser">删除</a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import {
  DeleteRequest,
  UserAddRequest,
  UserControllerService,
  UserQueryRequest,
} from "../../../generated";
import myAxios from "@/plugins/myAxios";

//弹窗是否显示
const visible = ref<boolean>(false);
// 展示弹窗
const showModal = (id: number) => {
  visible.value = true;
  GetUserById(id);
};
// 弹窗确认
const handleOk = (e: MouseEvent) => {
  visible.value = false;
};

// 在线用户
const userData = ref();

// 在线用户列表
const userList = ref([]);

// 钩子函数
onMounted(() => {
  listUserByPage();
});

const resetUser = () => {
  userQueryRequest = {};
};

// 查询参数
let userQueryRequest: UserQueryRequest = {
  id: null,
  company: "",
  dept: "",
  job: "",
  sortField: "",
  sortOrder: "",
  userAccount: "",
  userName: "",
  userRole: "",
};

// 新增参数
const userAddRequest: UserAddRequest = {
  userAccount: "",
  userAvatar: "",
  userName: "",
  userPassword: "",
  userRole: "",
};

// 删除参数
const deleteRequest: DeleteRequest = {
  id: 0,
};

// 默认角色选择
const value1 = ref("");
// 点击，切换选项
const handleChange = (value: string) => {
  userQueryRequest.userRole = value;
};

// 点击，执行条件查询
const onFinish = () => {
  listUserByPage();
};
// 点击，条件查询失败
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

// 删除用户
const deleteUser = async () => {
  const res = await UserControllerService.deleteUserUsingPost(deleteRequest);

  // 查询成功，跳转到主页
  if (res.code === 0) {
    message.success("删除成功");
    userList.value = res.data.records;
  } else {
    message.error("删除失败");
  }
};

// 新增用户
const addUser = async () => {
  const res = await UserControllerService.addUserUsingPost(userAddRequest);
  // 登录成功，跳转到主页
  if (res.code === 0) {
    message.success("新增成功");
    userData.value = res.data;
  } else {
    message.error("新增失败");
  }
};

// 查询在线用户
const GetUserById = async (id: number) => {
  const res = await UserControllerService.getUserVoByIdUsingGet(id);
  // 查询成功，跳转到主页
  if (res.code === 0) {
    // message.success("查询成功");
    userData.value = res.data;
  } else {
    // message.error("查询失败");
  }
};

// 查询在线用户列表
const listUserByPage = async () => {
  const res = await UserControllerService.listUserByPageUsingPost(
    userQueryRequest
  );

  // 查询成功，跳转到主页
  if (res.code === 0) {
    message.success("查询成功");
    userList.value = res.data.records;
  } else {
    message.error("查询失败");
  }
};

// 表格-列
const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "登录名",
    dataIndex: "userAccount",
  },
  {
    title: "用户名",
    dataIndex: "userName",
  },
  {
    title: "角色名称",
    dataIndex: "userRole",
  },
  {
    title: "公司",
    dataIndex: "company",
  },
  {
    title: "部门",
    dataIndex: "dept",
  },
  {
    title: "岗位",
    dataIndex: "job",
  },
  {
    title: "是否可用",
    dataIndex: "status",
    key: "status",
    slots: { customRender: "status" },
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

// 点击，执行修改
const onFinish2 = () => {
  updateUser();
};

//弹窗是否显示
const visible2 = ref<boolean>(false);
// 展示弹窗
const showModal2 = () => {
  visible2.value = true;
};
// 弹窗确认
const handleOk2 = (e: MouseEvent) => {
  updateUser();
  visible2.value = false;
};

// 修改用户
const updateUser = async () => {
  message.success("修改用户信息成功");
};

// 导出表
const writeExcel = async () => {
  const res = await myAxios.post("/user/excel/write", {}).then((res: any) => {
    return res;
  });

  // 查询成功，跳转到主页
  if (res.code === 0) {
    message.success("导出成功");
  } else {
    message.error("导出失败");
  }
};
</script>

<style scoped>
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>
